<template>
  <div :style="[$parent.getTitleDirStyle, getModBottom]">
    <RTitle :title-color="getModColor" icon="customize" :isShow="getSettingStatus('title')"
            :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    <RInput v-model="dataLs.content" hint="添加自定义描述..."></RInput>

    <!--操作-->
    <ROperator :operators="['drag', 'setting']" @setting="onChangeSetting" @drag="onDrag"/>
    <!--设置-->
    <div v-show="changeSetting" @mouseleave="onChangeSetting" @drag="onDrag($event)">
      <RSetting v-model="settings.switchLs"></RSetting>
    </div>
  </div>

</template>

<script>
import RTitle from '../base/RTitle'
import RInput from '../base/RInput'
import ROperator from '../base/ROperator'
import RSetting from '../base/RSetting'
import mixin from '../../store/mixin'

export default {
  name: 'Customize',
  components: {RTitle, RInput, ROperator, RSetting},
  mixins: [mixin],
  data () {
    return {
      changeSetting: false
    }
  },
  props: ['compId'],
  methods: {
    onChangeSetting () {
      this.changeSetting = !this.changeSetting
    }
  }
}
</script>

<style scoped>

</style>
